<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件</title>
		<style type="text/css">
			input {
				font-size: 26px;
				margin-top: 20px;
			}

			body {
				background-image: url(../img/grassland.png);
			}

			#mytank {
				position: absolute;
				left: 10px;
				top: 100px
			}
		</style>
	</head>
	<body>
		<input id="btn1" type="button" value="按钮一" />
		<input id="btn2" type="button" value="按钮二" />
		<input id="btn3" type="button" value="按钮三" />
		<hr />
		<img id="mytank" src="../img/right.png" />
		<script type="text/javascript">
			//179000934 唐国橼
			//1.点击按钮一，弹出信息提示框，显示“javascript事件测试一”
			let btn1 = document.getElementById("btn1");
			btn1.addEventListener("click", function() {
				alert("javascript事件测试一");
			});
			//2.双击按钮二，按钮文字变为“按钮二测试”
			let btn2 = document.getElementById("btn2");
			btn2.addEventListener("dblclick", function() {
				this.value = "按钮二测试";
			});
			//3.鼠标移到按钮三上，按钮三的背景和文字颜色改变；同时，单击按钮三，弹出框显示“javascript事件测试三”
			let btn3 = document.getElementById("btn3");
			btn3.addEventListener("mouseover", function() {
				this.style.backgroundColor = "red";
				this.style.color = "yellow";
				this.addEventListener("click", function() {
					alert("javascript事件测试三");
				});
			});
			//4.键盘事件keydown
			var mytank = document.getElementById('mytank');
			//向下移动
			window.addEventListener(
				"keydown",
				function(e) {
					console.log(e.keyCode);
					if (e.keyCode == 40) {
						mytank.src = "../img/down.png";
						mytank.style.top = (mytank.offsetTop + 20) + 'px';
						if (mytank.offsetTop > window.screen.height - 230) {
							mytank.style.top = (window.screen.height - 230) + 'px';
						}
					}
				});
			//向右移动  179000934 唐国橼
			window.addEventListener(
				'keydown',
				function(e) {
					console.log(e.keyCode);
					if (e.keyCode == 39) {
						mytank.src = "../img/right.png";
						mytank.style.left = (mytank.offsetLeft + 20) + 'px';
						if (mytank.offsetLeft > window.screen.width - 90) {
							mytank.style.left = (window.screen.width - 90) + "px";
						}
					}
				});
			//向上移动
			window.addEventListener(
				"keydown",
				function(e) {
					console.log(e.keyCode);
					if (e.keyCode == 38) {
						mytank.src = "../img/up.png";
						mytank.style.top = (mytank.offsetTop - 20) + 'px';
						if (mytank.offsetTop < 80) {
							mytank.style.top = "80px";
						}
					}
				});
			//向左移动
			window.addEventListener(
				'keydown',
				function(e) {
					console.log(e.keyCode);
					if (e.keyCode == 37) {
						mytank.src = "../img/left.png";
						mytank.style.left = (mytank.offsetLeft - 20) + 'px';
						if (mytank.offsetLeft < 10) {
							mytank.style.left = "10px";
						}
					}
				});
			//5.禁用网页的右键菜单
			window.addEventListener("contextmenu", function() {
				event.preventDefault();
			});
		</script>
	</body>
</html>
